<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="/common/head::baseHead('用户登录')"></div>
    <style type="text/css">
    </style>
</head>

<body>
    <div th:replace="/common/navbar::navbar(userCenter)"></div>
    <br>
    <div class="container">
        <form class="row" id="signin" th:action="@{/user}">

            <div class="alert col-md-6 offset-md-3" :class="isSuccess ? 'alert-success':'alert-danger'" v-if="seenBox" role="alert">
                {{message}}
                <button type="button" class="close" v-if="seenBox" @click="closeBox">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>


            <div class="col-md-6 offset-md-3 br">
                <div class="input-group justify-content-center">
                    <h3>Welcome to OliveBranch!</h3>
                </div>
            </div>

            <div class="col-md-6 offset-md-3 br">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">用户名：</span>
                    </div>
                    <input type="text" class="form-control" placeholder="请输入用户" aria-label="Username" name="username">
                </div>
            </div>

            <div class="col-md-6 offset-md-3 br">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">密码：</span>
                    </div>
                    <input type="password" class="form-control" placeholder="请输入密码" aria-label="Password" name="password">
                </div>
            </div>

            <div class="col-md-6 offset-md-3 br">
                <div class="input-group justify-content-center">
                    <button type="button" @click="submitForm" :disabled="disSubmit" class="btn btn-success">登录</button>
                </div>
            </div>

        </form>
    </div>
    <a id="user" th:href="@{/user}">
        <!--script-->
        <div th:replace="/common/js::baseJs"></div>
        <script th:inline="javascript">
            var sinupVue = new Vue({
                data() {
                    return {
                        isSuccess: false,
                        seenBox: false,
                        message: "",
                        disSubmit: false
                    }
                },
                methods: {
                    submitForm: function () {
                        var form = $("form#signin");
                        axios.post(
                            form.attr("action"),
                            form.serialize()
                        ).then((response) => {
                            var data = response.data;
                            this.message = data.message;
                            this.isSuccess = true;
                            this.seenBox = true;
                            this.disSubmit = true;
                            setTimeout(() => {
                                window.location.href = $("#user").attr("href");
                            }, 3000);
                        }).catch((error) => {
                            var data = error.response.data;
                            this.message = data.message;
                            this.isSuccess = false;
                            this.seenBox = true;
                        });
                    },
                    closeBox: function () {
                        this.seenBox = false;
                    }
                }
            }).$mount('#signin');

        </script>
</body>

</html>